今天就來學學單純的表單與資料的綁定

表單與資料的綁定

上次有用過的 v-model 可以拿來綁定 textBox checkBox radioButton select等等的表單元件，現在來看看各個元件

textBox

這個之前就有用到了這裡來複習一下：

{{ text }}
<input type="text" class="form-control" v-model="text">

<script>
    var app = new Vue({
        el: '#app',
        data: {
            text: ''
        },
    });
</script>

checkBox

checkBox 本來就是會有 true false 的形式來呈現要或不要，check 的時候 dev tool 裡面的 checkbox1 的值會是 true ，反之沒點選時是 false：

<div class="form-check">
    <input type="checkbox" class="form-check-input" id="check1" v-model="checkbox1">
    <label class="form-check-label" for="check1"> ... </label>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            checkbox1: false
        },
    });
</script>

那有多個 checkBox 的時候可以用陣列的方式來存入我們有點選的項目：

<div class="form-check">
    <input type="checkbox" id="check2" v-model="checkboxArray" value="雞">
    <label class="form-check-label" for="check2">雞</label>
</div>
<div class="form-check">
    <input type="checkbox" id="check3" v-model="checkboxArray" value="豬">
    <label class="form-check-label" for="check3">豬</label>
</div>
<div class="form-check">
    <input type="checkbox" id="check4" v-model="checkboxArray" value="牛">
    <label class="form-check-label" for="check4">牛</label>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            checkboxArray: []
        },
    });
</script>

radioButton

這個大家應該都很熟悉，就是用單選用：

<div class="form-check">
    <input type="radio" id="radio2" v-model="singleRadio" value="雞">
    <label class="form-check-label" for="radio2">雞</label>
</div>
<div class="form-check">
    <input type="radio" id="radio3" v-model="singleRadio" value="豬">
    <label class="form-check-label" for="radio3">豬</label>
</div>
<div class="form-check">
    <input type="radio" id="radio4" v-model="singleRadio" value="牛">
    <label class="form-check-label" for="radio4">牛</label>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            singleRadio: ''
        },
    });
</script>

select

我們在用 select 的時候可以用個小技巧就是在在第一個 option 上 給個 disabled，這樣使用者就不會再點到請選擇這個選項了：

<select name="" id="" class="form-control" v-model="selected">
  <option value="" disabled>---請選擇---</option>
  <option value="台北" v-mode="selected">台北</option>
  <option value="台中" v-mode="selected">台中</option>
  <option value="台南" v-mode="selected">台南</option>
</select>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            selected: ''
        },
    });
</script>